<template>
	<u-tabbar :value="value" @change="change" :safeAreaInsetBottom="true"
	activeColor="#333333" inactiveColor="#B3B4B5" :border="false">
		<u-tabbar-item text="社区" @click="tabClick">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="../static/img/tabbar-community-ac.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="../static/img/tabbar-community.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="藏品">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="../static/img/tabbar-collection-ac.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="../static/img/tabbar-collection.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="小镇">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="../static/img/tabbar-town-ac.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="../static/img/tabbar-town.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="../static/img/tabbar-me-ac.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="../static/img/tabbar-me.png"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		data () {
			return {
				value: this.active
			}
		},
		computed: {
			...mapState({
				token: state => state.userToken
			})
		},
		methods: {
			change(name) {
				console.log(name)
				switch (name) {
					case 0:
						uni.redirectTo({
							url: '/pages/ring/index'
						})
						break;
					case 1:
						uni.redirectTo({
							url: '/pages/collection/index'
						})
						break;
					case 2:
						if (this.token) {
							uni.redirectTo({
								url: '/pages/town/index'
							})
						} else {
							uni.navigateTo({
								url: '/pages/user/login'
							})
						}
						break;
					case 3:
						if (this.token) {
							uni.redirectTo({
								url: '/pages/user/user'
							})
						} else {
							uni.navigateTo({
								url: '/pages/user/login'
							})
						}
						break;
					default:
						break;
				}
				this.value = name
			},
			tabClick () {
				this.$emit('tabClick')
			}
		}
	}
</script>

<style scoped>
	.u-page__item__slot-icon{
		width: 24px;
		height: 24px;
	}
</style>
